<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>直播</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="//www.jd.com/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="static/styles/swiper.min.css">
    <link rel="stylesheet" href="static/styles/base.css">
    <link rel="stylesheet" href="static/styles/site.css">
    <script>
        //强制刷新页面
        if (localStorage.getItem('video_status_has_change') == 1) {
            localStorage.setItem('video_status_has_change', 2);
            window.location.reload();
        } else {
            localStorage.setItem('video_status_has_change', 1);
        }
    </script>
</head>
<body>
<div class="container main_audio">
    <a href="javascript:void(0)" class="close_btn" id="closeAudio">关闭</a>
    <div class="video_wrap" id="video" style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;"></div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <article class="scene scene_2 swiper-slide">
                <main>
                    <section class="anchor_introduction">
                        <h2>直播简介</h2>
                        <p>周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，中国台湾流行乐男歌手、音乐人、演员、导演、编剧、监制、商人。</p>
                        <p>2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格[1] 。2002年举行“The One”世界巡回演唱会[2]
                            。2003年成为美国《时代周刊》封面人物[3-4] 。2004年获得世界音乐大奖中国区最畅销艺人奖[5]
                            。2005年凭借动作片《头文字D》获得台湾电影金马奖、香港电影金像奖最佳新人奖[6]
                            。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖[7] 。2007年自编自导的文艺片《不能说的秘密》获得台湾电影金马奖年度台湾杰出电影奖[8] 。</p>
                    </section>
                    <section class="recommend_product">
                        <div class="p_wrap clear_fix">
                            <div class="p_item clear_fix">
                                <img src="https://gw3.alicdn.com/bao/uploaded/i3/TB1LI.kOpXXXXbHXFXXXXXXXXXX_!!0-item_pic.jpg_210x210.jpg">
                                <h3 class="no_wrap">初棉衬衫2017春季新款女装打底牛仔衬衫女长袖纯棉牛仔衬衣女修身</h3>
                                <h4 class="no_wrap">弹性自然保湿</h4>
                            </div>
                            <div class="p_item">
                                <img src="https://gw3.alicdn.com/bao/uploaded/i3/TB1LI.kOpXXXXbHXFXXXXXXXXXX_!!0-item_pic.jpg_210x210.jpg">
                                <h3 class="no_wrap">初棉衬衫2017春季新款女装打底牛仔衬衫女长袖纯棉牛仔衬衣女修身</h3>
                                <h4 class="no_wrap">弹性自然保湿</h4>
                            </div>
                        </div>
                    </section>
                    <section class="time_line">
                        <h2>直播印记</h2>
                        <ul>
                            <li>
                                <time>03-06 15:50</time>
                                <h3>关注主播参与抽奖</h3>
                            </li>
                            <li>
                                <time>03-06 15:50</time>
                                <h3>关注主播参与抽奖</h3>
                            </li>
                            <li>
                                <time>03-06 15:50</time>
                                <h3>关注主播参与抽奖</h3>
                            </li>
                        </ul>
                    </section>
                </main>
            </article>
            <article class="scene scene_1 swiper-slide">
                <header>
                    <div class="anchor_info">
                        <img src="static/images/head.jpg">
                        <h3 class="no_wrap">德玛西亚</h3>
                        <h3 class="no_wrap">上海</h3>
                        <a href="javascript:void(0)"></a>
                    </div>
                    <div class="new_user no_wrap">
                        3424 正在观看
                        大王叫我来巡山来了
                    </div>
                    <div class="brand">
                        <h3>淘宝直播</h3>
                        <h4>ID:12520</h4>
                    </div>
                </header>
                <div class="cover hide"></div>
                <main class="p_list hide">
                    <section class="hot_items">
                        <h2>最热推荐</h2>
                        <ul>
                            <li class="p_item clear_fix">
                                <i class="p_flag">hot</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h4 class="p_price">¥ 288.0</h4>
                                </div>
                            </li>
                            <li class="p_item clear_fix">
                                <i class="p_flag">hot</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h4 class="p_price">¥ 288.0</h4>
                                </div>
                            </li>
                            <li class="p_item clear_fix">
                                <i class="p_flag">hot</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h4 class="p_price">¥ 288.0</h4>
                                </div>
                            </li>
                            <li class="p_item clear_fix">
                                <i class="p_flag">hot</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h4 class="p_price">¥ 288.0</h4>
                                </div>
                            </li>
                            <li class="p_item clear_fix">
                                <i class="p_flag">hot</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h4 class="p_price">¥ 288.0</h4>
                                </div>
                            </li>
                        </ul>
                    </section>
                    <section class="all_items">
                        <h2>全部宝贝<strong>10</strong></h2>
                        <ul>
                            <li class="p_item clear_fix">
                                <i class="p_flag hot">热</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h3 class="p_title">2017春装新款时尚气质OL印花韩版蝴蝶结立领真丝衬衫女长袖百搭</h3>
                                    <h4 class="p_price">¥ 288.0</h4>
                                    <h5 class="p_bottom">
                                        <span class="f_left">100笔购买</span>
                                        <a href="javascript:void(0)" class="f_right">加入购物车</a>
                                    </h5>
                                </div>
                            </li>
                            <li class="p_item clear_fix">
                                <i class="p_flag">9</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h3 class="p_title">2017春装新款时尚气质OL印花韩版蝴蝶结立领真丝衬衫女长袖百搭</h3>
                                    <h4 class="p_price">¥ 288.0</h4>
                                    <h5 class="p_bottom">
                                        <span class="f_left">100笔购买</span>
                                        <a href="javascript:void(0)" class="f_right">加入购物车</a>
                                    </h5>
                                </div>
                            </li>
                            <li class="p_item clear_fix">
                                <i class="p_flag">8</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h3 class="p_title">2017春装新款时尚气质OL印花韩版蝴蝶结立领真丝衬衫女长袖百搭</h3>
                                    <h4 class="p_price">¥ 288.0</h4>
                                    <h5 class="p_bottom">
                                        <span class="f_left">100笔购买</span>
                                        <a href="javascript:void(0)" class="f_right">加入购物车</a>
                                    </h5>
                                </div>
                            </li>
                            <li class="p_item clear_fix">
                                <i class="p_flag">7</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h3 class="p_title">2017春装新款时尚气质OL印花韩版蝴蝶结立领真丝衬衫女长袖百搭</h3>
                                    <h4 class="p_price">¥ 288.0</h4>
                                    <h5 class="p_bottom">
                                        <span class="f_left">100笔购买</span>
                                        <a href="javascript:void(0)" class="f_right">加入购物车</a>
                                    </h5>
                                </div>
                            </li>
                            <li class="p_item clear_fix">
                                <i class="p_flag">6</i>
                                <img src="https://gw2.alicdn.com/bao/uploaded/i1/89504872/TB2OtCwbYplpuFjSspiXXcdfFXa_!!89504872.jpg_210x210.jpg">
                                <div class="p_info">
                                    <h3 class="p_title">2017春装新款时尚气质OL印花韩版蝴蝶结立领真丝衬衫女长袖百搭</h3>
                                    <h4 class="p_price">¥ 288.0</h4>
                                    <h5 class="p_bottom">
                                        <span class="f_left">100笔购买</span>
                                        <a href="javascript:void(0)" class="f_right">加入购物车</a>
                                    </h5>
                                </div>
                            </li>
                        </ul>
                    </section>
                </main>
                <main class="interactive">
                    <section class="middle">
                        <div class="customer_wrap">
                            <div id="status"></div>
                            <ul id="discuss"></ul>
                        </div>
                        <canvas id="canvas" class="canvas"></canvas>
                    </section>
                    <section class="bottom flex">
                        <a href="javascript:void(0)" class="link_btn" id="linkBtn"></a>
                        <input type="text" placeholder="跟主播聊点什么？" class="flex_item">
                        <a href="javascript:void(0)" class="btn share_btn"></a>
                        <a href="javascript:void(0)" class="btn gift_btn"></a>
                        <a href="javascript:void(0)" class="btn zan_btn" id="zan"></a>
                    </section>
                </main>
            </article>
            <article class="scene scene_3 swiper-slide"></article>
        </div>
    </div>
</div>

<script src="static/scripts/jquery.min.js"></script>
<script src="static/scripts/swiper.jquery.min.js"></script>
<!-- 腾讯直播JS Start -->
<script type="text/javascript" src="static/scripts/live_connect.js"></script>
<!-- 腾讯直播JS End -->

<script>
    (function () {
        var player = new qcVideo.Player(
            //页面放置播放位置的元素 ID
            "video",
            {
                //播放器宽度，单位像素(必选参数)
                "width": $(window).width(),
                //播放器高度，单位像素(必选参数)
                "height": $(window).height,
                //直播地址，支持 hls/rtmp/flv 三种格式(必选参数)
                "live_url": "http://6119.liveplay.myqcloud.com/live/6119_4fc7623866cc027c4703ebbecb49036e.m3u8",
                //直播画面开始播放前，最大缓存时间 ; 这个属性可有效下行带宽不足导致避免 rtmp 直播
                //卡顿的情况 (可选参数)
                "cache_time": 0.3,
                //h5播放，开始播放前贴片(可选参数)
                "h5_start_patch": "http://echt.xingpu.cc:80/uploadFiles/LOGO/844d30a992224d11b63b2590d6262a00.jpg"
                //直播提示语自定义（目前仅支持 h5播放，后面将会支持 flash 播放提示配置）(可选参数)
                //"wording": 同上
            }
        );
    })();
    setTimeout(function () {
        $('video').attr({
            'x-webkit-airplay': true,
            'muted': 'muted',
            'x5-video-player-type': 'h5',
            'x5-video-player-fullscreen': false
        });
    }, 1000);
</script>
<script src="static/scripts/site.js"></script>
</body>
</html>